<template>
  <div id="megagame">
    <div class="megagameContent">
      <div class="megagameContentSwiper">
        <swiper ref="mySwiper" :options="swiperOptionsBanner">
          <swiper-slide v-for="(item, index) in bannerData" :key="index">
            <img :src="$globalImageUrl + item.imgUrl" alt="" @click="onOpenExternalLink(item.pathUrl)">
          </swiper-slide>
        </swiper>
      </div>
      <div class="megagameContentBox">
        <!-- 大赛新闻 -->
        <div class="homeContentFlex">
          <div class="homeContentFlexLeft">
            <h2 class="homeContentFlexTitle">大赛新闻 <span @click="jumpTo('/newsList?sceneType=megagame')">更多</span></h2>
            <div class="homeContentFlexLeftBox">
              <div class="megagameContentBoxNews">
                <div class="megagameContentBoxNewsLeft">
                  <swiper ref="mySwiper" :options="swiperOptionsNews">
                    <swiper-slide v-for="(item, index) in newsBannerData" :key="index">
                      <img :src="$globalImageUrl + item.imgUrl" alt="" @click="onOpenExternalLink(item.pathUrl)">
                    </swiper-slide>
                  </swiper>
                </div>
                <div class="megagameContentBoxNewsRight">
                  <ul>
                    <li v-for="(item, index) in newsData" :key="index" @click="jumpTo('/newsDetail?sceneType=megagame&megagameNewsId=' + item.newsId)">
                      <span :class="{gray: index > 2}">{{++index}}</span>
                      <p class="ellipse">{{item.newsTitle}}</p>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 获奖作品分析 -->
        <div class="homeContentFlex">
          <div class="homeContentFlexLeft">
            <h2 class="homeContentFlexTitle">获奖作品分析 <span @click="jumpTo('/worksLiat')">更多</span></h2>
            <div class="homeContentFlexLeftBox">
              <div class="megagameContentBoxAwardWorks">
                <ul>
                  <!-- <li v-for="(item, index) in carryPrize" :key="index" @click="jumpTo('/worksDetail?sceneType=masterStudio&worksId=' + item.id)"> -->
                  <li v-for="(item, index) in carryPrize" :key="index" @click="jumpTo('/worksDetail?sceneType=acquirePrize&worksId=' + item.id)">
                    <img :src="$globalImageUrl + item.literatureImg" alt="">
                    <p class="ellipse">{{item.literatureName}}</p>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!-- 大赛工作室 -->
        <div class="homeContentFlex">
          <div class="homeContentFlexLeft">
            <h2 class="homeContentFlexTitle">大赛工作室 <span @click="jumpTo('/stylistInfoList?sceneType=megagameList')">更多</span></h2>
            <div class="homeContentFlexLeftBox">
              <div class="megagameContentBoxWorkRoom">
                <ul>
                  <li v-for="(item, index) in gameStudioData" :key="index" @click="jumpTo('/stylistInfo?sceneType=megagame&studioId=' + item.id)">
                    <img :src="$globalImageUrl + item.studioLogo" alt="">
                    <div class="megagameContentBoxWorkRoomDescribe">
                      <p class="ellipse">{{item.studioName}}</p>
                      <span class="ellipse">{{item.introduce}}</span>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'megagame',
  data () {
    return {
      swiperOptionsBanner: {
        pagination: {
          el: '.swiper-pagination'
        },
        slidesPerView: 3,
        spaceBetween: 20,
        centeredSlides: false,
        loop: true,
        autoplay: true,
        preventLinksPropagation: false
      },
      swiperOptionsNews: {
        pagination: {
          el: '.swiper-pagination'
        },
        slidesPerView: 1,
        spaceBetween: 20,
        centeredSlides: false,
        loop: true,
        autoplay: true,
        preventLinksPropagation: false,
        uniqueNavElements: true
      },
      bannerData: [],
      newsBannerData: [],
      newsData: [],
      carryPrize: [],
      gameStudioData: []
    }
  },
  created () {
    this.fetchBannerList()
    this.fetchNewsBanner()
    this.fetchNews()
    this.fetchAwardList()
    this.fetchGameStudio()
  },
  methods: {
    // 获取技能大赛顶部轮播图
    fetchBannerList () {
      this.$api.getBannerList({
      }).then(res => {
        if (res.code === 0) {
          this.bannerData = res.data
        }
      })
    },
    // 获取大赛新闻轮播
    fetchNewsBanner () {
      this.$api.getNewsBanner({
      }).then(res => {
        if (res.code === 0) {
          this.newsBannerData = res.data
        }
      })
    },
    // 获取大赛新闻列表
    fetchNews () {
      this.$api.getNews({
      }).then(res => {
        if (res.code === 0) {
          this.newsData = res.data
        }
      })
    },
    // 获取获奖作品分析列表
    fetchAwardList () {
      this.$api.getAwardList({
      }).then(res => {
          console.log(res)
          this.carryPrize = res.records
        // if (res.code === 0) {
        //   this.carryPrize = res.data
        // }
      })
    },
    // 获取大赛工作室列表
    fetchGameStudio () {
      this.$api.getGameStudio({
      }).then(res => {
        console.log(res)
        this.gameStudioData = res.data
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../assets/less/variable.less';

.swiper-slide {
  img{
    display: inline-block;
    height: 4rem;
    width: 100%;
  }
}
#megagame{
  .megagameContent{
    width: 1200px;
    margin: auto;
    padding: .5rem 0;
    .megagameContentSwiper{
      padding-bottom: .4rem;
    }
    .megagameContentBox{
      background-color: #fff;
      padding: .15rem .3rem;
      .homeContentFlex{
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        margin-bottom: .3rem;
        h2.homeContentFlexTitle{
          font-size: .20rem;
          font-family: 'Helvetica Neue', Helvetica, sans-serif;
          line-height: .5rem;
          font-weight: bold;
          border-bottom: 1px solid #ccc;
          color: @global-primary-color;
          position: relative;
          margin-bottom: .2rem;
          span {
            position: absolute;
            font-size: .16rem;
            font-family: 'Helvetica Neue', Helvetica, sans-serif;
            line-height: .4rem;
            font-weight: bold;
            float: right;
            bottom: 0;
            right: 0;
          }
        }
        .homeContentFlexLeft{
          width: 100%;
          .homeContentFlexLeftBox{
            .megagameContentBoxNews{
              font-size: 0;
              .megagameContentBoxNewsLeft{
                width: 70%;
                display: inline-block;
                vertical-align: middle;
                padding-right: .3rem;
              }
              .megagameContentBoxNewsRight{
                width: 30%;
                height: 4rem;
                display: inline-block;
                vertical-align: middle;
                line-height: .44rem;
                ul{
                  li{
                    span{
                      font-size: .16rem;
                      font-family: 'Helvetica Neue', Helvetica, sans-serif;
                      font-weight: bold;
                      display: inline-block;
                      vertical-align: middle;
                      width: .32rem;
                      height: .32rem;
                      background-color: @global-primary-color;
                      border-radius: 500px;
                      text-align: center;
                      line-height: .32rem;
                      color: #fff;
                    }
                    span.gray{
                      background-color: @global-default-placeholder;
                    }
                    p{
                      width: calc(100% - .32rem);
                      font-size: .16rem;
                      font-family: 'Helvetica Neue', Helvetica, sans-serif;
                      font-weight: 500;
                      display: inline-block;
                      vertical-align: middle;
                      padding-left: .1rem;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                    }
                  }
                }
              }
            }
            .megagameContentBoxAwardWorks{
              ul {
                li:nth-child(6n){
                  margin-right: 0;
                }
                li{
                  width: 1.7rem;
                  display: inline-block;
                  margin-right: .24rem;
                  margin-bottom: .24rem;
                  img{
                    display: inline-block;
                    width: 1.7rem;
                    height: 2rem;
                  }
                  p{
                    font-size: 0.14rem;
                    line-height: 0.3rem;
                    font-weight: 500;
                    color: #333;
                    text-align: center;
                  }
                }
              }
            }
            .megagameContentBoxWorkRoom{
              ul {
                li:nth-child(6n){
                  margin-right: 0;
                }
                li{
                  width: 1.7rem;
                  display: inline-block;
                  margin-right: .24rem;
                  margin-bottom: .24rem;
                  font-size: 0;
                  box-shadow: 0 0 10px #efefef;
                  img{
                    display: inline-block;
                    width: 1.7rem;
                    height: 1.7rem;
                  }
                  .megagameContentBoxWorkRoomDescribe{
                    padding: .05rem;
                    p{
                      width: 100%;
                      font-size: 0.14rem;
                      line-height: 0.2rem;
                      font-weight: 500;
                      color: #333;
                      text-align: left;
                    }
                    span{
                      width: 100%;
                      font-size: 0.12rem;
                      font-weight: 400;
                      color: #999;
                      line-height: .2rem;
                      display: inline-block;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
